<template>
  <view :class="$style.navbar" class="fixed w-full z-10" :style="{ top: `${statusBarHeight}px` }"
    style="height: 68rpx; background-color: #385ADD;">

    <van-icon name="arrow-left" v-if="isLeftButton" size="18" color="#FFFFFF" @click="returnBackPrev" />
    <view :class="$style.title"> {{ title }} </view>
    <block v-for="(item, index) in organizationList" :key="index">
      <view :class="$style.organization">
        {{ organizationList[index] }}
      </view>
    </block>

  </view>
</template>

<script setup lang='ts'>
import { useSystemInfo } from "@/store";
import { ref } from "vue";
const systemInfo = useSystemInfo();
const statusBarHeight = ref<number>(systemInfo.statusBarHeight);
interface Props {
  title: string;
  isLeftButton: boolean;
  organizationList: Array<string>;
}

const {
  title,
  isLeftButton = false,
  organizationList = [],
} = defineProps<Props>();

function returnBackPrev() {
  wx.navigateBack({
    delta: 1,
  });
}

</script>

<style lang='less' module>
.navbar {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 25rpx;
}

.title {
  padding-left: 39rpx;
  font-size: 32rpx;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

.organization {
  font-size: 24rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  margin-left: 25rpx;
}
</style>
